<!--
 * @Description: CPA列表页 -- Cpacomputer_Questionbank
 * @Author: your name
 * @Date: 2024-01-21
 * @LastEditTime: 2024-01-21
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="Cpacomputer heart_w">
      <el-table :data="computerData" style="width: 100%">
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          width="50"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="test_name"
          label="试卷名称"
          width="500"
          align="center"
          :show-overflow-tooltip="true"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="t_num"
          label="总体量"
          width="180"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="duration"
          label="总时长"
          align="center"
          header-align="center"
          width="140"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          width="150"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 1" @click="startTest">
              开始测试
            </el-button>
            <el-button v-if="scope.row.status == 3">阅卷中</el-button>
            <!-- <el-button>重复测试</el-button> -->
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="排行榜"
          width="150"
          align="center"
          header-align="center"
        >
          <el-button>成绩暂未公布</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cpacomputer',
  data() {
    return {
      tableData: [
        {
          ai_id: 121,
          test_name: '【202308】《经济法》模拟考试卷',
          d_num: 16,
          t_num: 65,
          case_num: 4,
          paper_num: 'JKJJF202307290730',
          duration: 120,
          createtime: '2023-07-12 09:11',
          starttime: 1689124227,
          endtime: 1725153027,
          cid: 1262,
          accuracy: '2.17',
          use_time: 22,
          is_start: 1,
          grading: 0,
          is_test: 1,
          status: 1,
          report_id: 248,
          show_rank: 0
        },
        {
          ai_id: 121,
          test_name: '【202308】《经济法》模拟考试卷',
          d_num: 16,
          t_num: 65,
          case_num: 4,
          paper_num: 'JKJJF202307290730',
          duration: 120,
          createtime: '2023-07-12 09:11',
          starttime: 1689124227,
          endtime: 1725153027,
          cid: 1262,
          accuracy: '2.17',
          use_time: 22,
          is_start: 1,
          grading: 0,
          is_test: 1,
          status: 3,
          report_id: 248,
          show_rank: 0
        }
      ],
      computerData: [] // 列表重组列表
    }
  },
  created() {
    let _that = this
    this.tableData.map((ele, index) => {
      if (ele.duration) {
        ele.duration = ele.duration + '分钟'
      }
      _that.computerData.push(ele)
    })

    console.log(_that.computerData, '重组数据')
  },
  methods: {
    indexMethod(index) {
      return index + 1
    },
    startTest() {
      this.$router.push({
        path: '/exam_practice/common/Cpa_examtest_jk',
        query: {}
      })
    }
  }
}
</script>

<style scoped lang="scss">
.Cpacomputer {
  margin-top: 40px;
  margin-bottom: 40px;
}

::v-deep .el-table {
  thead {
    height: 55px;
    th {
      background-color: #f5f7f9;
    }
  }
}

::v-deep {
  .el-table__body,
  .el-table__header {
    width: 100% !important;
    border: 1px solid #ccc;
    border-bottom: none;
  }
}

::v-deep .el-table__body {
  .el-button {
    background-color: #f5f5f5;
  }
  td {
    border-bottom: 1px solid #ccc !important;
  }

  .el-table__row:last-child td {
    border-bottom: 2px solid #ccc !important;
  }
}
</style>
